<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select option move</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function moveCountries(type) {
	var box_left = document.getElementById("campaign_countries_original");
	var box_right = document.getElementById("campaign_countries");
	if (type == "add") {
		for (var i = 0; i < box_left.length; i ++) {
			var op = box_left.options[i];
			if (op.selected) {
				op.selected = false;	
				$(box_right).append(op);
				i --;
			}
		}
	} else if (type == "remove") {
		for (var n = 0; n < box_right.length; n ++) {
			var opt = box_right.options[n];
			if (opt.selected) {
				opt.selected = false;
				$(box_left).append(opt);
				n --;
			}
		}
	}
}

function initCountries(str) {
	str = "BR,US";
	var box_right = document.getElementById("campaign_countries");
	if (str) {
		var arr = str.split(",");
		for (var i = 0; i < arr.length; i ++) {
			var opt = document.createElement("option");
			opt.value = arr[i];
			opt.text = arr[i];
			box_right.add(opt, null);
		}
	}
}

function saveCountries() {
	var box_right = document.getElementById("campaign_countries");
	for (var n = 0; n < box_right.length; n ++) {
		var opt = box_right.options[n];
		opt.selected = true;
	}
	var v = $("#campaign_countries").val();
	alert(v);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding:0;"><select id="campaign_countries_original" multiple="multiple" size="8" style="width:200px;height:120px;">
        <option value="US">USA</option>
        <option value="UK">United Kingdom</option>
        <option value="BR">Brazil</option>
        <option value="CA">Canada</option>
        <option value="KR">South Korea</option>
        <option value="JP">Japan</option>
        <option value="MX">Mexico</option>
        <option value="NL">Netherlands</option>
        <option value="DE">Germany</option>
        <option value="FX">France</option>
      </select></td>
    <td align="center"><div style="padding:0px 10px;">
        <div>
          <button onclick="moveCountries('add');" style="width:100px;">add &gt;&gt;</button>
        </div>
        <div style="margin-top:8px;">
          <button onclick="moveCountries('remove');" style="width:100px;">&lt;&lt; remove</button>
        </div>
      </div></td>
    <td style="padding:0;"><select id="campaign_countries" multiple="multiple" size="8" style="width:200px;height:120px;">
      </select></td>
  </tr>
</table>
<p>
  <button onclick="saveCountries();" style="width:100px;">submit</button>
</p>
<p>
  <button onclick="initCountries();" style="width:100px;">init</button>
</p>
</body>
</html>
